import { ReactElement, useState,useCallback, useEffect } from 'react';
import {
  SearchBar
} from 'antd-mobile';
import './index.less';
import { TextWidget, getMessage } from '@inbiz/react';
import noData from './noData.svg'

type Iprops = {
  value: string[] | string;
  search:boolean;
  searchField:any;
  selectWindowHeight: number;
  contentHeight: string;
  type: boolean;
  confirm: Function;
  cancel: Function;
  children: (fun: (n: number) => void) => ReactElement;
  onSearch:any;
  listData:any;
  checkList:any;
  popupVisible:boolean;
};
function EformSelectList(props: Iprops): ReactElement {
  const { selectWindowHeight, contentHeight, confirm, cancel, children, value, type,search,searchField,listData,checkList,popupVisible} = props;
  const [activeNum, $activeNum] = useState(type ? value.length : 0);

  const numberChange = (num: number) => {
      $activeNum(num);   
  }
  useEffect(()=>{
    numberChange(value.length)
  },[popupVisible])

  const Child = children(numberChange);
  // 点击搜索
  const handleSearch = (value?: string) => {
      props.onSearch(value)
    }
  
  return (
    <div style={{ height: '100%' }}>
      <div className="EformStaticListbtn">
        <div
          onClick={() => {
            cancel();
          }}
          style={{ color: 'var(--inbiz-color-text)' }}
        >
          <TextWidget>EformStaticList.cancel</TextWidget>
        </div>
        {activeNum > 0 && type ? (
          <div className="activeItems">
            <TextWidget>EformStaticList.selected</TextWidget>
            {activeNum}
            <TextWidget>EformStaticList.items</TextWidget>
          </div>
        ) : (
          ''
        )}
        <div
          onClick={() => {
            confirm();
          }}
        >
          <TextWidget>EformStaticList.confirm</TextWidget>
        </div>
      </div>
      {search && searchField && (
          <div className="searchBox">
            <SearchBar
              placeholder='请输入搜索内容'
              onSearch={handleSearch}
              onCancel={handleSearch}
              onClear={handleSearch}
              clearOnCancel
              style={{'--height':'36px'}}
            />
          </div>
        )}
      <div
        className="EformSelectList-content"
        style={selectWindowHeight ? { height: 'calc(100% - 101.14px)' } : { maxHeight: '50vh' }}
      >
        {Child}
      </div>
    </div>
  );
}
export default EformSelectList;
